<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-commissionRange="{scope}">
				<div v-for="(item, index) in scope.row.data" :key="index">
					梯度{{ index + 1 }}：【{{ item.min }}】 &lt; 首单金额 ≤ 【{{
						item.max
					}}】，返【{{ item.money }}】元，是否返佣金：{{
						item.isCommission === 1 ? '是' : '否'
					}}
				</div>
			</template>
			<template #table-column-status="{scope}">
				<span v-if="scope.row.status == 1" style="color:#22DE48">启用</span>
				<span v-if="scope.row.status == 0" style="color:#A2A4BA">关闭</span>
			</template>
			<template #table-column-app="{scope}">
				{{ filterplatForm(scope.row.app) }}
			</template>
			<template #slot-delete="{scope}">
				<delBtn @del="crud.delete(scope.row)"></delBtn>
			</template>
			<template #slot-select-app>
				<div class="appNav">
					<span class="t">数据平台</span>
					<el-select
						class="select"
						size="small"
						@change="filterChange"
						v-model="appvalue"
						placeholder="请选择"
					>
						<el-option label="全部" value=""> </el-option>
						<el-option
							v-for="item in platformList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import delBtn from '@/components/common/del-btn';
import backItem from './components/back-item';
import { mapGetters } from 'vuex';
import stores from '@/utils/store';

export default {
	data() {
		return {
			crud: null,
			options: [],
			appvalue: ''
		};
	},
	components: {
		delBtn
	},
	computed: {
		...mapGetters(['platformList']),
		filterplatForm() {
			return function(val) {
				return this.platformList.length == 0
					? val
					: this.platformList.filter(v => v.value == val)[0].label;
			};
		}
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.systemMenagement.firstReturnSetting)
				.permission({
					update: true,
					delete: true,
					add: true
				})
				.set('dict', {
					label: {
						add: '添加首单返现设置'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: 60
						},
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '数据平台',
							prop: 'app',
							align: 'center'
						},
						{
							label: '首单返现参数',
							prop: 'commissionRange',
							align: 'left',
							width: 400
						},

						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '修改时间',
							prop: 'updateTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					}
				})
				.set('upsert', {
					sync: true,
					props: {
						width: '800px',
						labelWidth: '80px'
					},
					items: [
						{
							label: '数据平台',
							prop: 'app',
							span: 10,
							component: {
								name: 'el-select',
								props: {
									placeholder: '请选择平台',
									filterable: true,
									'default-first-option': true,
									clearable: true
								},
								options: this.options
							},
							rules: {
								required: true,
								message: '数据平台'
							}
						},
						{
							props: {
								labelWidth: '80px'
							},
							prop: 'gradientArr',
							component: {
								name: 'gradient-one',
								components: {
									backItem
								},
								props: {
									value: null
								},
								data() {
									return {
										json: this.value
									};
								},
								watch: {
									value(val) {
										this.json = val;
									}
								},
								methods: {
									getItem(val) {
										this.$emit('input', val);
									}
								},
								render() {
									return (
										<div>
											<backItem
												dataJson={this.json}
												on-submit={this.getItem}></backItem>
										</div>
									);
								}
							}
						},
						{
							label: '启动状态',
							prop: 'status',
							component: {
								name: 'el-switch'
							}
						}
					]
				})
				.on('open', async (isEdit, data) => {
					this.crud.setData(
						'upsert.items[prop:app].component.options',
						this.$store.state.topFilter.platList
					);
					if (isEdit) {
						data.gradientArr = data.data;
						this.crud.setForm('status', data.status == 1 ? true : false);
					}
				})
				.on('refresh', async (params, { next, render }) => {
					let { list } = await next(params);
					list.map(m => {
						m.data = JSON.parse(m.data);
					});

					render(list);
				})
				.on('submit', async (isEdit, data, { next }) => {
					if (isEdit) {
						let status = data.status ? '1' : '0';
						next({
							app: data.app,
							data: data.gradientArr,
							status,
							id: data.id
						});
					} else {
						let status = data.status ? '1' : '0';
						next({
							app: data.app,
							data: data.gradientArr,
							status
						});
						return;
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'add-btn',
						'multi-delete-btn',
						'flex1',
						'slot-select-app',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh({
				app: stores.get('platForm') || 'yzf'
			});
		},
		filterChange(e) {
			this.crud.refresh({
				app: e
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.commission-range-tit {
	padding: 0 10px;
	color: $text-grey;
	span {
		color: #333333;
	}
}
.appNav {
	margin-right: 20px;
	font-size: $font14;
	.t {
		margin-right: 10px;
	}
}
</style>
